<template>
  <view class="user-wrapper">
    <view class="avatar-wrapper">
      <image :src="userInfo.avatar" mode="widthFix" />
    </view>
    <tui-list-view>
      <tui-list-cell @click="detail" :arrow="false">
        <view class="tui-item-box">
          <text class="tui-list-cell_name">昵称</text>
          <view class="tui-right">{{userInfo.nickname}}</view>
        </view>
      </tui-list-cell>
      <tui-list-cell @click="detail" :arrow="false" v-if="userInfo.phone">
        <view class="tui-item-box">
          <text class="tui-list-cell_name">手机号</text>
          <view class="tui-right">{{userInfo.phone}}</view>
        </view>
      </tui-list-cell>
      <tui-list-cell @click="detail" :arrow="false" v-else>
        <view class="tui-item-box">
          <text class="tui-list-cell_name">手机号</text>
          <view class="tui-right">
            <button open-type="getPhoneNumber" size="mini" @getphonenumber="getPhoneNumber" class="binding">
              <text>绑定手机号</text>
            </button>
          </view>
        </view>
      </tui-list-cell>
      <block v-if="userInfo.sex == 0">        
        <tui-list-cell :arrow="true">
          <view class="tui-item-box">
            <text class="tui-list-cell_name">性别</text>
            <view class="tui-right">
              <picker mode="selector" @change="bindSexPickerChange" :value="sex" :range="sexArray" range-key="name">
                 <view class="uni-input">{{sexArray[sex].name || '请选择性别'}}</view>
             </picker>
            </view>
          </view>
        </tui-list-cell>
      </block>
     <block v-else>
      <tui-list-cell :arrow="true">
        <view class="tui-item-box">
          <text class="tui-list-cell_name">性别</text>
          <view class="tui-right">{{userInfo.sex == 1 ? '男' : '女'}}</view>
        </view>
      </tui-list-cell>
     </block>
      
      <block v-if="userInfo.birthday == 0">
        
        <tui-list-cell :arrow="true" >
          <view class="tui-item-box">
            <text class="tui-list-cell_name">生日</text>
            <view class="tui-right">
              <picker mode="date" v-model="date" @change="bindDateChange">
                <view class="date" style="background: none;">{{
                  date || '请选择日期'
                }}</view>
              </picker>
            </view>
          </view>
        </tui-list-cell>
      </block>
      <block v-else>        
        <tui-list-cell  :arrow="true">
          <view class="tui-item-box">
            <text class="tui-list-cell_name">生日</text>
            <view class="tui-right">{{userInfo.birthday}}</view>
          </view>
        </tui-list-cell>
      </block>
    </tui-list-view>
    <view class="bottom-btn">
      <tui-form-button radius="50px" background="linear-gradient(-90deg, #FF5831 0%, #FF795A 100%);" 
      borderColor="transparent" @click="resetUserInfo" v-if="userInfo.sex == 0 || userInfo.birthday == 0">保存</tui-form-button>
    </view>
  </view>
</template>

<script>
  import tuiIcon from "@/components/thorui/tui-icon/tui-icon";
  import tuiFormButton from "@/components/thorui/tui-form-button/tui-form-button";
  import tuiListView from "@/components/thorui/tui-list-view/tui-list-view";
  import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell";
  import {
  	mapState,
  	mapMutations,
    mapGetters
  } from 'vuex';
  import {
    getUserInfo,
    getMenuUser,
    bindingPhone,
    postUserEdit
  } from "@/api/user";
  export default {
    computed: mapGetters(["userInfo"]),
    data(){
      return {
        sexArray: [
          {
            id: '1',
            name: '男'
          },
          {
            id: '2',
            name: '女'
          }
        ],
        date: '',
        sex: '',
        sexModel: ''
      }
    },
    components: {
      tuiIcon,
      tuiFormButton,
      tuiListView,
      tuiListCell
    },
    methods:{      
      bindDateChange: function(e) {
        this.date = e.target.value;
      },
      bindSexPickerChange: function(e){
        console.log(e,'sex')
        this.sex = e.target.value;
        this.sexModel = parseInt(e.target.value) + 1;
      },
      resetUserInfo: function(){
        if(this.sexModel == 0 || this.date == 0){
          uni.showToast({
            title: '情补充完信息后提交'
          })
          return 
        }else{
          let userInfo = this.userInfo;
          postUserEdit({
            sex: this.sexModel,
            birthday: this.date,
          }).then(
            (res) => {
              this.$store.dispatch("userInfo", true);
              uni.showToast({
                title: res.msg,
                icon: "none",
                duration: 2000,
              });
              this.$yrouter.back();
            },
            (err) => {
              uni.showToast({
                title:
                  err.msg || err.response.data.msg || err.response.data.message,
                icon: "none",
                duration: 2000,
              });
            }
          );
        }
      },
      getPhoneNumber: function (e) {
        let thit = this;
        // 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
        if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
          uni.showLoading({
            title: "绑定中"
          });
          bindingPhone({
              encryptedData: e.mp.detail.encryptedData,
              iv: e.mp.detail.iv
            })
            .then(res => {
              // this.User();
              thit.$store.dispatch("userInfo", true);
              uni.hideLoading();
              uni.showToast({
                title: res.msg,
                icon: "success",
                duration: 2000
              });
            })
            .catch(error => {
              uni.hideLoading();
              thit.$store.dispatch("userInfo", true);
              console.log(error);
              uni.showToast({
                title: error.msg ||
                  error.response.data.msg ||
                  error.response.data.message,
                icon: "none",
                duration: 2000
              });
            });
          // // 获取当前环境的服务商
          // uni.getProvider({
          //   service: "oauth",
          //   success: function (res) {
          //     // 此处可以排除h5
          //     if (res.provider) {
          //       uni.login({
          //         success: loginRes => {
          //           bindingPhone({
          //               code: loginRes.code,
          //               encryptedData: e.mp.detail.encryptedData,
          //               iv: e.mp.detail.iv
          //             })
          //             .then(res => {
          //               // this.User();
          //               thit.$store.dispatch("userInfo", true);
          //               uni.hideLoading();
          //               uni.showToast({
          //                 title: res.msg,
          //                 icon: "success",
          //                 duration: 2000
          //               });
          //             })
          //             .catch(error => {
          //               uni.hideLoading();
          //               thit.$store.dispatch("userInfo", true);
          //               console.log(error);
          //               uni.showToast({
          //                 title: error.msg ||
          //                   error.response.data.msg ||
          //                   error.response.data.message,
          //                 icon: "none",
          //                 duration: 2000
          //               });
          //             });
          //         },
          //         fail() {
          //           reject("绑定失败");
          //         }
          //       });
          //     }
          //   },
          //   fail() {
          //     reject("获取环境服务商失败");
          //   }
          // });
        } else {
          uni.showToast({
            title: "已拒绝授权",
            icon: "none",
            duration: 2000
          });
        }
      },
    }
  }
</script>

<style lang="less">
  .tui-item-box {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .tui-list-cell_name {
    padding-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tui-ml-auto {
    margin-left: auto;
  }

  .tui-right {
    margin-left: auto;
    margin-right: 34rpx;
    font-size: 26rpx;
    color: #999;
  }

  .tui-logo {
    height: 52rpx;
    width: 52rpx;
    flex-shrink: 0;
  }

  .tui-flex {
    display: flex;
    align-items: center;
  }

  .tui-msg-box {
    display: flex;
    align-items: center;
  }

  .tui-msg-pic {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: block;
    margin-right: 24rpx;
    flex-shrink: 0;
  }

  .tui-msg-item {
    max-width: 500rpx;
    min-height: 80rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .tui-msg-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 34rpx;
    line-height: 1;
    color: #262b3a;
  }

  .tui-msg-content {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 26rpx;
    line-height: 1;
    color: #9397a4;
  }

  .tui-msg-right {
    max-width: 120rpx;
    height: 88rpx;
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
  }

  .tui-right-dot {
    height: 76rpx !important;
    padding-bottom: 10rpx !important;

  }

  .tui-msg-time {
    width: 100%;
    font-size: 24rpx;
    line-height: 24rpx;
    color: #9397a4;
  }
  .bottom-btn{
    padding: 100rpx 30rpx 30rpx 30rpx;
  }
  .user-wrapper {
    background-color: #fff;
    height: 100%;
    .avatar-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 120rpx 0;
      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }
    }
  }
</style>
